<!-- 验证码防晒设置 -->
<template>
    <div class="vue-box">
        <div class="c-card" v-if="state.model">
            <!-- 如果还有配置项没有初始化，就显示这个：提示初始化 -->
            <template v-if="state.dataList.length < state.names.length">
                <com-init-config ref="com-init-config" :groupName="state.groupName" :names="state.names" :data-list="state.dataList"></com-init-config>
            </template>
            <!-- 如果已经全部初始化了，则显示这个：开始UI操作配置 -->
            <template v-else>
                <!-- tab卡片 -->
                <el-tabs v-model="state.activeTab" class="s-tab">
                    <!-- ---------------------------------- 系统参数 ---------------------------------- -->
                    <el-tab-pane label="防刷参数" name="tab1">
                        <el-form :inline="false" label-width="8em">
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="IP 防刷：">
                                同一IP 24 小时内最多发送 
                                <el-input class="sr-input" v-model="state.model.ip24HouseMaxSendCount"></el-input>
                                条验证码
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="短信防刷：">
                                同一手机号 24 小时内最多发送
                                <el-input class="sr-input" v-model="state.model.phone24HouseMaxSendCount"></el-input>
                                条验证码
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="邮箱防刷：">
                                同一邮箱 24 小时内最多发送
                                <el-input class="sr-input" v-model="state.model.email24HouseMaxSendCount"></el-input>
                                条验证码
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="有效时长：">
                                一个验证码的有效时长为：
                                <el-input class="sr-input" v-model="state.model.vcEffectiveTime"></el-input>
                                秒
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="错误次数：">
                                一个验证码的最多可尝试 
                                <el-input class="sr-input" v-model="state.model.vcErrorCount"></el-input>
                                次
                            </in-item2>
                        </el-form>
                    </el-tab-pane>

                    <!-- ---------------------------------- 其它配置 ---------------------------------- -->
                    <el-tab-pane label="其它配置" name="tab2">
                        <br>
                        <span>其它配置</span>
                    </el-tab-pane>

                </el-tabs>
                
                <!-- 确定按钮 -->
                <div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
                    <hr style="height: 2px;">
                    <div class="c-item" style="padding-left: 10em;">
                        <el-button class="btn-13" type="primary" icon="el-icon-Check" @click="ok">保存修改</el-button>
                        <el-button class="btn-13" type="primary" plain icon="el-icon-RefreshRight" @click="f5">重置</el-button>
                    </div>
                </div>
                
            </template>
        </div>
    </div>
</template>

<script setup name="config-view-vc-setting">
import ComInitConfig from './com-init-config';
import {reactive} from "vue";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    activeTab: 'tab1',  // 当前显示的tab
    groupName:  "vc-setting",  // 当前所配置的配置分组名，可不填，写一个空串
    // 本页面要查询的配置集合
    names: [
        "ip24HouseMaxSendCount",  // 同一个ip 24小时内最多发送多少条短信验证码
        "phone24HouseMaxSendCount",  // 同一个phone 24小时内最多发送多少条短信验证码
        "email24HouseMaxSendCount",  // 同一个email 24小时内最多发送多少条短信验证码
        "vcEffectiveTime",  // 一个验证码的有效时间，单位：秒
        "vcErrorCount",  // 一个验证码的最多错误次数，超过这个次数，则验证码失效 
    ],
    dataList: [], // 根据 names 查出来的配置项集合 
    model: null,  // 配置信息，JSON格式 
})

// ------------------ 函数 ------------------
// 加载数据
const f5 = function(){
    sa.ajax('/SpConfig/getListByNames', { names: state.names.join(',') }, function(res){
        // 配置项数组
        state.dataList = res.data;
        // 配置项 JSON 对象
        state.model = {};
        for (const item of res.data) {
            state.model[item.name] = item.value;
        }
    });
};
f5();

// 提交：确认修改配置 
const ok = function(){
    sa.ajax('/SpConfig/updateConfig', state.model, function(res){
        sa.ok2('保存成功');
    });
};

// 增加配置后的回调 
const addConfigCall = function (name, value, remarks) {
    proxy.$refs['com-init-config'].addConfigCall(name, value, remarks);
}

// 对外开放函数 
defineExpose({f5, addConfigCall})


</script>

<style scoped lang="scss">
.vue-box{height: 100%; overflow: hidden;}
.c-card{
    height: calc(100% - 4.5em);
    position: relative;
    :deep(.el-input){width: 500px;}
    :deep(.el-textarea){width: 500px;}
    :deep(.el-tabs__content){height: calc(100% - 130px); overflow: auto;}
    :deep(.el-form) {padding-top: 20px; padding-bottom: 50px;}
    .sr-input{
        width: 60px;
        margin: 0px 10px;
    }
}
/* .vue-box{padding: 0px;} */
.s-tab{height: calc(100%); }

.c-remark{ margin-left: 10px; }


</style>
